<extend name="public/base2" />
<block name="head">
    <!-- Resizable -->
    <link href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
    <!-- Bootstrap Table -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <!-- Bootstrap Eitable -->
    <link rel="stylesheet" href="__STATIC__/plugins/x-editable-develop/dist/bootstrap4-editable/css/bootstrap-editable.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" integrity="sha256-kH9DlfVOJaHaEYFnLxpJjpiyb3v8bctsIJpzdHJFHkk=" crossorigin="anonymous">
    <!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> -->
    <!-- Select2 v4 theme for Bootstrap4 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.4.0/dist/select2-bootstrap4.min.css" integrity="sha256-3UPl0A8ykc7qW77XmHP0HDb1Nvs/09AACcTrNpIbdJ4=" crossorigin="anonymous">    
    <!-- Sweetalert 2@9 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.10.12/dist/sweetalert2.css">
    <!-- Bootstrap Switch Button -->
    <css href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css"/> 
    <!-- Bootstrap v4 -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css" integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA=" crossorigin="anonymous">
</block>
<block name="main-content">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Bootstrap Table</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <div id="toolbar">
                <a href="{:url('/' . $Think.const.CONTROLLER . '/create')}" class="btn btn-info" role="button">
                    <i class="fas fa-plus"></i> 新增
                </a>
            </div>
            <!-- <div id="table">
                <bootstrap-table :columns="columns" :options="options" @on-click-cell="onClickCell"></bootstrap-table>
            </div> -->
            <!-- <table
                id="table"
                data-url="{:url('index')}"
                data-resizable="true"
                data-search="true",
                data-show-toggle="true",>
                <thead>
                    <tr>
                        <th data-field="id" data-width="1" data-width-unit="%">ID</th>
                        <th data-field="ag_id" data-width="100" data-width-unit="%">角色</th>
                        <th data-formatter="iconFormatter" data-field="icon" data-width="100" data-width-unit="%">头像</th>
                        <th data-field="admin_nickname" data-width="100" data-width-unit="%">昵称</th>
                        <th data-field="status" data-width="100" data-width-unit="%">状态</th>
                        <th data-field="last_login_time" data-width="100" data-width-unit="%">登录时间</th>
                        <th data-field="last_login_ip" data-width="100" data-width-unit="%">登录IP</th>
                        <th data-field="admin_email" data-width="100" data-width-unit="%">邮箱地址</th>
                        <th data-field="bbb" data-width="100" data-width-unit="%">操作</th>
                    </tr>
                </thead>
            </table> -->
            <table id="table"></table>
        </div>
        <!-- /.card-body -->
    </div>
</block>
<block name="footer-script">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="__ADMINLTE__/plugins/jquery/jquery.min.js"><\/script>')</script>
    <!-- AdminLTE App -->
    <script src="__ADMINLTE__/dist/js/adminlte.min.js"></script>
    <!-- Popper -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <!-- Bootstrap V4 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!-- Resizable -->
    <script src="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
    <!-- Bootstrap Editable -->
    <script src="__STATIC__/plugins/x-editable-develop/dist/bootstrap4-editable/js/bootstrap-editable.js"></script>
    <!-- Bootstrap Table -->
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
    <!-- Bootstrap Table Editable -->
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
    <!-- Bootstrap Resizable -->
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
    <!-- Bootstrap Table Locales -->
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- Bootstrap Table Vue -->
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table-vue.min.js"></script>
    <!-- Vue 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Select2(只有带full的版本才行) -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.js"></script>
    <!-- axios(类似Ajax) -->
    <js href="https://unpkg.com/axios@0.19.2/dist/axios.min.js" />
    <!-- Sweetalert 2@9 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.10.12/dist/sweetalert2.min.js"></script>
    <!-- Bootstrap Switch Button -->
    <js href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js"/>
    <js href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"/>
    <!-- App JS -->
    <script src="__STATIC__/js/app.js"></script>
    <script>
        $(function() {
            // window.urls = {
            //     'ag_id':    '{:url("ag_id")}',
            //     'icon':     '{:url("icon")}',
            //     'nickname': '{:url("admin_nickname")}',
            //     'status':   '{:url("status")}',
            //     'email':    '{:url("email")}'
            // };
            // 设置默认请求类型为PUT
            $.fn.editable.defaults.ajaxOptions = {type: "put"}; 
            $('#table').bootstrapTable({
                url: "{:url('/" + CONTROLLER + "')}",
                resizable: true,
                search: true,
                searchOnEnterKey: true,
                showSearchButton: true,
                showColumns: true,
                pagination: true,
                pageSize: "10",
                responseHandler: "responseHandlerBoot",
                toolbar: "#toolbar",
                uniqueId: "id",
                theadClasses: "thead-light",
                onPostBody: (data) => {
                },
                columns: [{
                    field: 'id',
                    title: 'ID',
                    width: '1',
                    widthUnit: '%',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'ag_id',
                    title: '角色',
                    width: '10',
                    widthUnit: '%',
                    align: 'center',
                    editable: 'roleEditableBoot',
                    sortable: true,
                }, {
                    field: 'icon',
                    title: '头像',
                    class: 'avatar',
                    align: 'center',
                    width: '10',
                    widthUnit: '%',
                    editable: 'iconEditableBoot'
                }, {
                    field: 'admin_nickname',
                    title: '昵称',
                    width: '10',
                    widthUnit: '%',
                    align: 'center',
                    editableTitle: '请修改昵称',
                    editableEmptytext: '空',
                    editable: 'nicknameEditableBoot',
                    sortable: true
                }, {
                    field: 'status',
                    title: '状态',
                    width: '10',
                    widthUnit: '%',
                    align: 'center',
                    sortable: true,
                    formatter: 'statusFormatterBoot',
                    events: 'statusEventsBoot'
                }, {
                    field: 'last_login_time',
                    title: '登录时间',
                    width: '10',
                    widthUnit: '%',
                    align: 'center',
                    sortable: true,
                    formatter: 'loginTimeFormatterBoot' 
                }, {
                    field: 'last_login_ip',
                    title: '登录IP',
                    width: '12',
                    widthUnit: '%',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'admin_email',
                    title: '邮箱地址',
                    width: '15',
                    widthUnit: '%',
                    align: 'center',
                    editableTitle: '请修改Email地址',
                    editable: 'emailEditableBoot',
                    sortable: true
                }, {
                    field: 'operate',
                    title: '操作',
                    width: '22',
                    widthUnit: '%',
                    align: 'center',
                    formatter: 'operateFormatterBoot',
                    events: 'operateEventsBoot'
                }]
            })
            
        });
        
        var $table = $('#table');

        function updateCell(index, field, value) {
            $table.bootstrapTable('updateCell', {
                index: index,
                field: field,
                value: value
            })
            // console.log($table.bootstrapTable('getData'))
        }
    </script>
</block>